<%@ page import="list.model.Contact" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--整个联系人表单--%>
<style>
    .modify {
        border: 0;
        border-radius: 10px;
        background-color: transparent;
    }

    .addon {
        top: 0;
    }

    #standard {
        padding: 10px;
    }
</style>
<div id="standard">
    <a href="?opt=newUser&tag=<%=tag%>">
        <%if (tag > 0) {%>
        <a href="module/route.jsp?opt=insert&key=contact&tag=<%=tag%>">
            <button class="btn btn-info" type="button" id="insertUser">新建联系人</button>
        </a>
        <%}%>
        <%if (tag >= 0) {%>
        <a href="module/route.jsp?opt=output&tag=<%=tag%>" target="_blank">
            <button class="btn btn-default pull-right" type="button" id="outputVcf">导出 vcf 文件</button>
        </a>
        <%}%>
    </a>
</div>
<table class="table table-hover table-bordered table-striped">
    <thead>
    <tr>
        <th class="tab-name">姓名</th>
        <th class="tab-email">邮箱</th>
        <th class="tab-add">地址</th>
        <th class="tab-tel">号码</th>
        <th class="edit"></th>
    </tr>
    </thead>
    <tbody>
    <%
        if (null != output && 0 < output.length) {
            for (Contact contact : output) {
    %>
    <tr>
        <input type="hidden" name="id" value="<%=contact.getContact_id()%>">
        <td><%
            //if (null != contact.getHead()) {%>
            <%--<img class="" src="<%=contact.getHead()%>">--%>
            <%//}%>
            <input class="modify" name="name" type="text" value="<%=contact.getName()%>" readonly>
        </td>
        <td>
            <input class="modify" name="email" type="text" value="<%=contact.getEmail()%>" readonly>
        </td>
        <td>
            <input class="modify" name="address" type="text" value="<%=contact.getAddress()%>" readonly>
        </td>
        <td class="dropdown">
            <%@ include file="phone.jsp" %>
        </td>
        <td>
            <%@ include file="contact.jsp" %>
            <button class="btn btn-danger delete deleteContact" type="button">删除</button>
        </td>
    </tr>
    <%
            }
        }
    %>
    </tbody>
</table>
<script>
    $(function () {
        //在线修改功能
        $(".modify").dblclick(function () {
            $(this).removeAttr("readonly");
        });
        $(".modify").focusout(function () {
            $(this).attr("readonly", "readonly");
            $.get("module/route.jsp", {
                    "opt": "update",
                    "key": "contact",
                    "id": $(this).parent().siblings("input[name='id']").val(),
                    "pro": $(this).attr("name"),
                    "val": $(this).val(),
                    "tag": $("#tag").val()
                }, function (response) {

                }
            );
        });
        $(".deleteContact").click(function () {
            $.get("module/route.jsp", {
                    "opt": "delete",
                    "key": "contact",
                    "id": $(this).parent().siblings("input[name='id']").val(),
                    "tag": $("#tag").val()
                }, function (response) {

                }
            );
            $(this).parents("tr").detach();
        });
    });
</script>
